<template>
  <div>
    <draggable
        :list="com_list"
        :disabled="false"
        class="list-group"
        ghost-class="ghost"
        @start="dragging = true"
        @end="dragging = false"
    >
      <component :is="item.editor" v-for="item in com_list" :key="item.name" :ref="item.name"></component>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable"
import  flexDiv from './editor_com/flexDiv.vue'
export  default  {
  components:{
    flexDiv,
    draggable,
  },
  data(){
    return {
      com_list:[
        {'name':'topdiv',editor:'com-flex-div',},
        {'name':'top2',editor:'com-flex-div',},
      ]
    }
  },
  mounted(){
    setTimeout(()=>{
      this.$refs.topdiv[0].com_list = [
        {'name':'one',editor:'com-flex-div',},
        {'name':'2',editor:'com-flex-div',},
        {'name':'3',editor:'com-flex-div',},
        {'name':'4',editor:'com-flex-div',},
      ]
      this.$refs.top2[0].com_list=[
        {'name':'5',editor:'com-flex-div',},
        {'name':'6',editor:'com-flex-div',},
        {'name':'7',editor:'com-flex-div',},
      ]
    },1000)

  }
}
</script>